<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实验8</title>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<!-- <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> -->
<style>
.error{
	color:red;
}
#code{
 width:80px;
 height:30px;
 font-size:18px;
 font-family:Arial; 
 font-style:italic; 
 font-weight:bold; 
 border:0; 
 letter-spacing:2px; 
 color:blue; 
 }
#input{
  width:100px;
 height:25px;
}
#signupForm{
 margin:0 auto;
 width:480px;
 height:auto;
 background-image: url("../images/test8/c.gif");
}
fieldset{
  margin:0 auto;
  width:450px;
  text-align: center;
  padding-top: 40px;
}
.submit{
  background-color:honeydew;
  cursor: pointer;
  width:150px;
  height:30px;
  color:black;
  font-size: 15px;
 }
p{
  margin:0 auto;
  width:250px;
  height:50px;
}
input{
  width:170px;
 height:20px;
}
label{
  font-weight: bold;
  color:rgb(65, 63, 63);
}
</style>
</head>
<body>
<form class="cmxform" id="signupForm" method="get" action="">
  <fieldset>
    <p>
      <label for="username">用户昵称</label>
      <input id="username" name="username" type="text">
    </p>
    <p>
      <label for="password">用户密码</label>
      <input id="password" name="password" type="password">
    </p>
    <p>
      <label for="confirm_password">验证密码</label>
      <input id="confirm_password" name="confirm_password" type="password">
    </p>
	<p>
		<label for="tel">联系电话</label>
		<input id="tel" name="tel" type="text">
	</p>
	<p> 
    <label>验证码</label>
		<input type = "text" id = "input" name="input"/> 
		<input type = "button" id="code" name="code"/> 
	</p> 
    <p>
      <input class="submit" type="submit" value="注册">
    </p>
  </fieldset>
</form>

<script type="text/javascript">
//189000526-谭静

	function change(){
	  code=$("#code");
	// 验证码组成库
	 var arrays=new Array( 
		 '1','2','3','4','5','6','7','8','9','0',
		 'a','b','c','d','e','f','g','h','i','j', 
		 'k','l','m','n','o','p','q','r','s','t', 
		 'u','v','w','x','y','z', 
		 'A','B','C','D','E','F','G','H','I','J', 
		 'K','L','M','N','O','P','Q','R','S','T', 
		 'U','V','W','X','Y','Z'        
		 ); 
		 codes='';// 重新初始化验证码
	 for(var i = 0; i<4; i++){
		// 随机获取一个数组的下标
		var r = parseInt(Math.random()*arrays.length);
		codes += arrays[r];
	}
	// 验证码添加到input里
	   code.val(codes);
	}
	change();
	code.click(change);
   //单击验证
	$(".submit").click(function(){
		var inputCode = $("#input").val().toUpperCase(); //取得输入的验证码并转化为大写 
		console.log(inputCode);
	if(inputCode.length == 0) { //若输入的验证码长度为0
		alert("请输入验证码！"); //则弹出请输入验证码
	}else if(inputCode!=codes.toUpperCase()) { //若输入的验证码与产生的验证码不一致时
		alert("验证码输入错误!请重新输入"); //则弹出验证码输入错误
		change();//刷新验证码
		$("#input").val("");//清空文本框
	}else {
    $.validator.setDefaults({
		submitHandler: function(){
		   alert("提交事件!");
    }
    });
	} 
	});
  </script>

<script>
   //添加验证手机号码的方法
	$.validator.addMethod("isMobile", function(value, element) {
		var length = value.length;
		var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
		return this.optional(element) || (length == 11 && mobile.test(value));
	}, "请正确填写您的手机号码");


	$().ready(function() {
	// 在键盘按下并释放及提交后验证提交表单
	  $("#signupForm").validate({
      debug:true, //调试模式，即使验证成功也不会跳转到目标页面
			rules: {
			  username: {
          required: true,
          minlength: 2
			  },
			  password: {
          required: true,
          minlength: 8
			  },
			  confirm_password: {
          required: true,
          minlength: 8,
          equalTo: "#password"
			  },
			  tel : {
          required : true,
          minlength : 11,
          isMobile : true
		  	}
			  
		},
			messages: {
			  username: {
          required: "请输入用户名",
          minlength: "用户名必需由两个字母组成"
			  },
			  password: {
          required: "请输入密码",
          minlength: "密码长度不能小于 8 个字母"
			  },
			  confirm_password: {
          required: "请输入密码",
          minlength: "密码长度不能小于 8 个字母",
          equalTo: "两次密码输入不一致"
			  },
			  tel : {
          required : "请输入手机号",
          minlength : "确认手机不能小于11个字符",
          isMobile : "请正确填写您的手机号码"
				}
			}
		});
	});


	
	</script>
</body>
</html>
